<template>
  <el-menu
      :default-active="activeIndex"
      router
      mode="horizontal"
      background-color="#3e3d43"
      text-color="white"
      active-text-color="red"
      style="min-width: 1300px">
    <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
      {{ item.navItem }}
    </el-menu-item>
    <span style="right: 20px !important;position: absolute;padding-top: 20px;font-size: 20px;font-weight: bold;color: white">M3小说网</span>
  </el-menu>
</template>

<script>
export default {
  name: "NavMenu",
  data(){
    return{
      activeIndex: this.$route.path,
      navList:[
        {name:'/index',navItem:'首页'},
        {name:'/library',navItem:'全部作品'},
        {name:'/collect',navItem:'我的收藏'},
        {name:'/authorIndex',navItem:'作家专区'},
        {name:'/admin/info',navItem:'个人中心'}
      ]
    }
  }
}
</script>

<style scoped>
a{
  text-decoration: none;
}

span {
  pointer-events: none;
}
:deep(.el-menu.el-menu--horizontal){
  background-color: #3e3d43;
}
:deep(.el-menu--horizontal>.el-menu-item){
  background-color: #3e3d43;
}
</style>